<template>
	<div class="audiobar">

		<div class="left" @click="showinfo()">
			<img :src="songurl.album.picUrl" alt="" width="65vh" height="65vh" />
			<span>
			<div>{{songurl.name | newslength1}}</div>
			<div>{{songurl.artists[0].name | newslength1}}</div>
		</span>
		</div>

		<div class="played">

			<i class="Hui-iconfont Hui-iconfont-shangyishou" v-on:click="$parent.prev"></i>
			<i class="Hui-iconfont " :class="[isplaying ? 'Hui-iconfont-bofang' : 'Hui-iconfont-zanting']" v-on:click="$parent.tapButton"></i>
			<i class="Hui-iconfont Hui-iconfont-xiayishou" v-on:click="$parent.next"></i>
			<i class="Hui-iconfont Hui-iconfont-music" @click.stop="showcollect()"></i>
		</div>

	</div>
</template>

<script>
	import { mapGetters, mapMutations } from 'vuex'
	import { newslength1 } from '../assets/js/newleng';
	import { shuffle } from '../assets/js/until';
	import collectlist from "./collectlist"
	export default {
		computed: {
			...mapGetters([
				"songurl",
				"isplaying",
				'collect',
				'playlist',
				'searchlist'
			]),

		},
		methods: {
			showinfo() {
				this.$store.dispatch("audioshow");
			},
			showcollect() {
				this.$store.dispatch('isshowcollect')
			},

			prev() {

			}

		},
		components: {
			collectlist
		},
		filters: {
			newslength1(date) {

				return newslength1(date);
			}
		}

	}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
	.audiobar {
		position: fixed;
		padding: 5px;
		bottom: 0;
		width: 100%;
		z-index: 888;
		height: 75px;
		background: rgba(0, 0, 0, 0.9);
		display: flex;
		justify-content: space-between;
		img {
			border: 3px solid;
			border-color: #956AD1 #4976B9;
			border-radius: 50%;
			vertical-align: middle;
		}
		.left {
			span {
				display: inline-block;
				color: #fff;
				font-size: 15px;
				vertical-align: middle;
			}
		}
		.played {
			color: #fff;
			align-items: center;
			display: flex;
			i {
				font-size: 22px;
				margin-left: 19px;
			}
		}
	}
</style>